<template>
  <div class="productionDesign_box myStyle">
    <div id="tags-view-container" class="tags-view-container">
      <div class="tags-view-wrapper">
        <router-link
          ref="tag"
          tag="span"
          class="tags-view-item active"
          :to="{ path: '/' }"
        >
          生产计划进度详情
          <span class="el-icon-close" @click="$router.push('/index')" />
        </router-link>
      </div>
    </div>
    <div class="content">
      <div class="content_top">
        <StrokeTitle2
          :isCenter="true"
          title="计划完成度"
          class="float margin"
          style="width: 32.3%"
        >
          <div class="flex_center" slot="select">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange1"
            />
            <el-select
              v-model="top1Form.type"
              placeholder="请选择"
              style="width: 58px"
              size="mini"
              @change="top1FormChange"
            >
              <el-option
                v-for="item in [
                  { value: '', label: '全部' },
                  { value: '1', label: '追加' },
                  { value: '0', label: '基本' },
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <div class="flex_center Echarts" slot="content">
            <PieImg3
              :data="top1a"
              :isLenged="false"
              itemWidth="0.9"
              :showTooltip="true"
              cirLeft="0.8"
              :showLabel="true"
              :img="require('@/assets/images/echarts/djdscwc.png')"
              :color="['#00ebcd', '#ff7474']"
            />
            <div style="width: 100%; height: 100%" class="flex_center">
              <div class="clzdjd_box">
                <div
                  class="clzdjd_item flex_center"
                  v-for="(item, index) in top1b"
                  :key="index"
                >
                  <div class="clzdjd_item_left flex_between">
                    <div
                      class="bigCir flex_center"
                      :style="{
                        border: '1px solid rgba(' + color[index] + ',0.4)',
                      }"
                    >
                      <div
                        class="smallCir"
                        :style="{
                          border: '1px solid rgba(' + color[index] + ',1)',
                        }"
                      ></div>
                      <div
                        class="border"
                        :style="{ background: 'rgba(' + color[index] + ',1)' }"
                      ></div>
                    </div>
                  </div>
                  <div class="clzdjd_item_right flex_center">
                    <div
                      class="lt"
                      :style="{ color: 'rgba(' + color[index] + ',1)' }"
                    >
                      {{ item.name }}
                    </div>
                    <div
                      class="rt"
                      :style="{ color: 'rgba(' + color[index] + ',1)' }"
                      v-if="top1b[0].value != 0"
                    >
                      {{ item.value }}箱<span
                        :style="{
                          color: 'rgba(' + color[index] + ',1)!important',
                        }"
                        v-show="index != 0"
                      >
                        /
                        {{
                          parseInt((item.value / top1b[0].value) * 100)
                        }}%</span
                      >
                    </div>
                    <div
                      class="rt"
                      :style="{ color: 'rgba(' + color[index] + ',1)' }"
                      v-else
                    >
                      {{ item.value }}箱<span
                        :style="{
                          color: 'rgba(' + color[index] + ',1)!important',
                        }"
                        v-show="index != 0"
                      >
                        / 0%</span
                      >
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </StrokeTitle2>
        <StrokeTitle2
          :isCenter="true"
          title="来源分析"
          class="float margin"
          style="width: 32.3%"
        >
          <div class="flex_center Echarts" slot="content">
            <TwoRow barWidth="6" style="height: 100%" :data="top2"></TwoRow>
          </div>
        </StrokeTitle2>
        <StrokeTitle2
          :isCenter="true"
          title="分类统计"
          class="float margin"
          style="width: 32.4%"
        >
          <div class="flex_center" slot="select">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange2"
            />
            <div
              class="all_box"
              style="margin-left: 0px"
              @click="productPlanCount3All"
            >
              全部
            </div>
          </div>
          <div class="flex_center Echarts" slot="content">
            <XRow barWidth="6" :data="top3" barLeft="6%" barRight="22%"></XRow>
          </div>
        </StrokeTitle2>
      </div>
      <div class="content_center">
        <StrokeTitle2
          :isCenter="true"
          title="全部计划"
          class="float margin"
          style="width: 32.3%"
        >
          <div class="flex_center" slot="select">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange3"
            />
            <div
              class="all_box"
              style="margin-left: 0px"
              @click="productPlanCount4All"
            >
              全部
            </div>
          </div>
          <div class="flex_center Echarts" slot="content">
            <PieImg
              :data="center1"
              legendLeft="24%"
              length="5"
              itemWidth="0.84"
              cirLeft="-0.05"
              :img="require('@/assets/images/echarts/djdscqb.png')"
            />
          </div>
        </StrokeTitle2>
        <StrokeTitle2
          :isCenter="true"
          title="已完成占比"
          class="float margin"
          style="width: 32.3%"
        >
          <div class="flex_center" slot="select">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange4"
            />
            <div
              class="all_box"
              style="margin-left: 0px"
              @click="productPlanCount40All"
            >
              全部
            </div>
          </div>
          <div class="flex_center Echarts" slot="content">
            <PieImg
              legendLast="()"
              :data="center2"
              legendLeft="24%"
              length="5"
              itemWidth="0.84"
              cirLeft="-0.05"
              :img="require('@/assets/images/echarts/djdscwc.png')"
            />
          </div>
        </StrokeTitle2>
        <StrokeTitle2
          :isCenter="true"
          title="未完成占比"
          class="float margin"
          style="width: 32.4%"
        >
          <div class="flex_center" slot="select">
            <ElementRadio
              v-model="model"
              :isButton="true"
              @change="radioChange5"
            />
            <div
              class="all_box"
              style="margin-left: 0px"
              @click="productPlanCount41All"
            >
              全部
            </div>
          </div>
          <div class="flex_center Echarts" slot="content">
            <PieImg
              legendLast="()"
              :data="center3"
              legendLeft="24%"
              length="5"
              itemWidth="0.84"
              cirLeft="-0.05"
              :img="require('@/assets/images/echarts/djdscwwc.png')"
            />
          </div>
        </StrokeTitle2>
      </div>
      <div class="content_bottom">
        <StrokeTitle2
          :isCenter="true"
          title="当年十二个月生产量统计"
          class="float margin"
          style="width: 99%"
        >
          <div class="flex_center Echarts" slot="content">
            <MoreDirection
              :data="bottom"
              gridLeft="10%"
              gridRight="10%"
              :isCategory="false"
              :yAxisLineShow="true"
              :xAxisLineShow="true"
              :legendData="['天数']"
              yUnit="天"
              barWidth="11"
              style="height: 95%; margin-top: 1%"
            />
          </div>
        </StrokeTitle2>
      </div>
    </div>
    <AllDialog ref="AllDialog" />
  </div>
</template>

<script>
import PieImg3 from "@/components/echarts/pie/img3.vue";
import {
  ProductPlanCount1,
  ProductPlanCount2,
  ProductPlanCount3,
  ProductPlanCount4,
  ProductPlanCount5,
  ProductPlanCount6,
  ProductPlanCount7,
} from "@/api/echarts/productionDesign/index";
import StrokeTitle2 from "@/components/myComponents/stroke/title2.vue";
import TwoRow from "@/components/echarts/bar/twoRow.vue";
export default {
  components: {
    TwoRow,
    PieImg3,
    StrokeTitle2,
  },
  data() {
    return {
      color: ["35, 195, 255", "0, 235, 205", "255, 116, 116"],
      model: "month",
      //计划完成度
      top1a: [],
      //计划完成度
      top1b: [],
      //计划完成度
      top1Form: {
        pDateEnd: this.$getMonth("e"),
        pDateStart: this.$getMonth("s"),
        type: "",
      },

      //来源分析
      top2: {},
      //分类统计
      top3: [],
      //分类统计
      top3Form: {
        pDateEnd: this.$getMonth("e"),
        pDateStart: this.$getMonth("s"),
      },
      //全部计划占比统计
      center1: [],
      center1Form: {
        pDateEnd: this.$getMonth("e"),
        pDateStart: this.$getMonth("s"),
      },
      //已完成计划占比统计
      center2: [],
      center2Form: {
        pDateEnd: this.$getMonth("e"),
        pDateStart: this.$getMonth("s"),
        status: "2",
      },
      //未完成计划占比统计
      center3: [],
      center3Form: {
        pDateEnd: this.$getMonth("e"),
        pDateStart: this.$getMonth("s"),
        status: "1",
      },
      //当年十二个月生产量统计
      bottom: [],
    };
  },
  mounted() {
    this.productPlanCount1();
    this.productPlanCount2();
    this.productPlanCount3();
    this.productPlanCount4();
    this.productPlanCount40();
    this.productPlanCount41();
    this.productPlanCount5();
  },
  methods: {
    //计划完成度
    productPlanCount1() {
      ProductPlanCount1(this.top1Form).then((res) => {
        if (res.code == 200) {
          this.top1a = JSON.parse(JSON.stringify(res.data));
          this.top1a = this.top1a.slice(1);
          this.top1b = JSON.parse(JSON.stringify(res.data));
        }
      });
    },
    //form1类型切换
    top1FormChange() {
      this.productPlanCount1();
    },
    radioChange1(event) {
      this.top1Form.pDateStart = event[0];
      this.top1Form.pDateEnd = event[1];
      this.productPlanCount1();
    },
    //来源分析
    productPlanCount2() {
      ProductPlanCount2().then((res) => {
        if (res.code == 200) {
          var obj = {
            xData: [],
            yData1: [],
            yData2: [],
            yData3: [],
            yData4: [],
            yData5: [],
            yData6: [],
          };
          for (let item of res.data) {
            obj.xData.push(item.name);
            obj.yData1.push(item.value1);
            obj.yData2.push(item.value2);
            obj.yData3.push(item.value3);
            obj.yData4.push(item.value4);
            obj.yData5.push(item.value5);
            obj.yData6.push(item.value6);
          }
          this.top2 = obj;
        }
      });
    },
    //分类统计
    productPlanCount3() {
      ProductPlanCount3(this.top3Form).then((res) => {
        if (res.code == 200) {
          // console.log(3, res);
          this.top3 = res.data;
        }
      });
    },
    //分类统计-全部
    productPlanCount3All() {
      let obj = JSON.parse(JSON.stringify(this.top3Form));
      obj.all = "111";
      ProductPlanCount3(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.dialogTableVisible = true;
          this.$refs.AllDialog.tableData.data = res.data;
          this.$refs.AllDialog.unit = "";
          this.$refs.AllDialog.right.unit = "";
        }
      });
    },
    radioChange2(event) {
      this.top3Form.pDateStart = event[0];
      this.top3Form.pDateEnd = event[1];
      this.productPlanCount3();
    },
    //全部计划占比统计
    productPlanCount4() {
      ProductPlanCount4(this.center1Form).then((res) => {
        if (res.code == 200) {
          this.center1 = res.data;
        }
      });
    },
    //全部计划占比统计-全部
    productPlanCount4All() {
      let obj = JSON.parse(JSON.stringify(this.center1Form));
      obj.all = "111";
      ProductPlanCount4(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.dialogTableVisible = true;
          this.$refs.AllDialog.right.unit = "%";
          this.$refs.AllDialog.unit = "";
          this.$refs.AllDialog.tableData.column[4].prop = "";
          this.$refs.AllDialog.tableData.data = res.data;
        }
      });
    },
    radioChange3(event) {
      this.center1Form.pDateStart = event[0];
      this.center1Form.pDateEnd = event[1];
      this.productPlanCount4();
    },
    //已完成占比统计
    productPlanCount40() {
      ProductPlanCount6(this.center2Form).then((res) => {
        if (res.code == 200) {
          this.center2 = res.data;
        }
      });
    },
    //已完成占比统计-全部
    productPlanCount40All() {
      let obj = JSON.parse(JSON.stringify(this.center2Form));
      obj.all = "111";
      ProductPlanCount6(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.dialogTableVisible = true;
          this.$refs.AllDialog.right.unit = "标准箱";
          this.$refs.AllDialog.tableData.column[3].prop = "value2";
          this.$refs.AllDialog.tableData.data = res.data;
        }
      });
    },
    radioChange4(event) {
      this.center2Form.pDateStart = event[0];
      this.center2Form.pDateEnd = event[1];
      this.productPlanCount40();
    },
    //未完成占比统计
    productPlanCount41() {
      ProductPlanCount7(this.center3Form).then((res) => {
        if (res.code == 200) {
          this.center3 = res.data;
        }
      });
    },
    //未完成占比统计-全部
    productPlanCount41All() {
      let obj = JSON.parse(JSON.stringify(this.center3Form));
      obj.all = "111";
      ProductPlanCount7(obj).then((res) => {
        if (res.code == 200) {
          this.$refs.AllDialog.dialogTableVisible = true;
          this.$refs.AllDialog.right.unit = "标准箱";
          this.$refs.AllDialog.tableData.column[3].prop = "value2";
          this.$refs.AllDialog.tableData.data = res.data;
        }
      });
    },
    radioChange5(event) {
      this.center3Form.pDateStart = event[0];
      this.center3Form.pDateEnd = event[1];
      this.productPlanCount41();
    },
    //当年十二个月生产计划天数统计
    productPlanCount5() {
      ProductPlanCount5().then((res) => {
        if (res.code == 200) {
          this.top5 = [];
          for (var i = 0; i < res.data.length; i++) {
            let obj = {};
            obj.name = res.data[i].name;
            obj.value1 = res.data[i].value;
            this.bottom.push(obj);
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.clzdjd_box {
  width: 100%;
  // height: 80%;
  height: 190px;
  position: relative;
  left: -5%;
  .clzdjd_item {
    height: 100%;
    height: 60px;
    .clzdjd_item_left {
      width: 13%;
      height: 100%;
      position: relative;
      .index {
        position: absolute;
        color: #ffffff;
        left: 0;
        right: 0;
        bottom: 0;
        top: 0;
        margin: auto;
      }

      .bigCir {
        width: 25px;
        height: 25px;
        border: 1px solid #02d5c2;
        // background: rgba(66, 169, 255, 0.3);
        border-radius: 50%;
        position: relative;
        left: -0%;
        .smallCir {
          width: 15px;
          height: 15px;
          border: 1px solid #02d5c2;
          // background: red;
          border-radius: 50%;
        }
        .border {
          width: 1px;
          height: 20px;
          background: #02d5c2;
          position: absolute;
          top: 130%;
        }
      }
    }
    .clzdjd_item_right {
      width: 70%;
      height: 75%;
      margin-left: 1%;
      max-width: 435px;
      max-height: 124px;
      background: linear-gradient(
        180deg,
        rgba(44, 119, 187, 0.6) 0%,
        rgba(18, 81, 141, 0.6) 100%
      );
      border: 1px solid rgba(52, 134, 218, 0.6);
      // background: red;
      font-size: 15px;
      color: #00ebcd;
      .lt {
        width: 60%;
        // background-color: #fff;
        // padding-left: 20px;
        text-align: left;
      }
      .rt {
        width: 30%;
        // background-color: red;
        padding-left: 0px;
        font-weight: 700;
      }
    }
  }

  .clzdjd_item:last-child .border {
    width: 0 !important;
  }
}
@media screen and (max-width: 1000px) {
  .clzdjd_box {
    left: -8%;
    height: 180px;
    .clzdjd_item {
      position: relative;
      left: -4%;
      .clzdjd_item_left {
        position: relative;
      }
      .clzdjd_item_right {
        margin-left: 4%;
        padding: 0px 8px;
        height: 82%;
        font-size: 13px;
        width: 90%;
        .lt {
          padding: 0px;
        }
        .rt {
          width: 40%;
        }
      }
    }
  }
}
.productionDesign_box {
  .content {
    overflow-x: hidden;
    .content_top,
    .content_bottom,
    .content_center {
      //   background: red;
      width: 100%;
      height: 35.2%;
    }
    .content_center {
      height: 31.7%;
    }
    .content_bottom {
      height: 25.7%;
    }
    .Echarts {
      height: calc(100% - 50px);
      .jxb_right {
        width: 260px;
        // height: 150px;
        margin-left: -60px;
        // background: red;
        .left {
          display: flex;
          flex-direction: column;
          align-items: center;
          .big_cir {
            width: 18px;
            height: 18px;
            border-radius: 50%;
            border: 1px solid #086088;
            .small_cir {
              width: 10px;
              height: 10px;
              border-radius: 50%;
              border: 2px solid #02d5c2;
            }
          }
          .big_cir_blue {
            border: 1px solid #105b95;
            .small_cir_blue {
              border: 2px solid #1c9ad5;
            }
          }
          .and {
            width: 2px;
            height: 20px;
            margin: 8px 0;
            background: -moz-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -webkit-gradient(
              linear,
              left top,
              left bottom,
              color-stop(0%, #02d5c2),
              color-stop(100%, #1c9ad5)
            );
            background: -webkit-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -o-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: -ms-linear-gradient(top, #02d5c2 0%, #1c9ad5 100%);
            background: linear-gradient(to bottom, #02d5c2 0%, #1c9ad5 100%);
          }
        }
        .right {
          .item {
            width: 150px;
            height: 35px;
            border: 1px solid #086088;
            margin: 15px 10px;
            padding: 0 20px;
            .title,
            .number {
              font-size: 13px;
              color: #00ebcd;
            }
            .number {
              font-weight: 700;
            }
          }
          .item_blue {
            border: 1px solid #105b95;
            .title,
            .number {
              color: rgba(35, 195, 255, 1);
            }
          }
        }
      }
    }

    @media screen and (max-width: 1000px) {
      .Echarts {
        height: 100%;
      }
    }
  }
}
</style>
